/*
1 在登录页面上 点击注册链接 跳转到注册页面
  1 获取注册链接dom元素 绑定点击事件
  2 事件触发
    1 先隐藏登录div
    2 后显示注册div
2 在注册页面上 点击注册链接 跳转到登录页面
  1 获取链接dom元素 绑定点击事件
  2 事件触发
    1 先隐藏注册div
    2 后显示登录div

2 注册业务
  1 给注册表单添加 提交submit事件  阻止默认行为 添加form属性  autocomplete="off"
  2 事件触发
     1 获取用户名和密码
     2 合法性校验 是否为空
     3 使用axios 把用户名和密码发送给后端 完成注册
     4 后端响应成功 提示用户注册成功

     5 等待一会，自动切换到登录表单页面
     6 自动帮用户把账号填写到登陆表单 用户名

3 登录业务
  1 给登录表单添加 提交submit事件  阻止默认行为 添加form属性
  3 使用axios 把用户名和密码发送给后端 完成登录
*/

// 获取dom元素
const loginA = document.querySelector('.login-a')
const loginDiv = document.querySelector('.login')
const registerA = document.querySelector('.register-a')
const registerDiv = document.querySelector('.register')
const registerForm = document.querySelector('.register form')
const loginForm = document.querySelector('.login form')

// 登录div里的链接 绑定点击事件
loginA.addEventListener('click', function (e) {
    // 隐藏登录div
    loginDiv.style.display = "none"
    // 显示注册div
    registerDiv.style.display = "block"
})

// 注册div里的链接 绑定点击事件
registerA.addEventListener('click', function (e) {
    // 隐藏注册div
    registerDiv.style.display = "none"
    // 显示登录div
    loginDiv.style.display = "block"
})

/* 注册 */
// 给form表单添加submit事件
registerForm.addEventListener("submit", async function (eve) {
    // 阻止默认事件
    eve.preventDefault()

    // 获取form表单内用户名和密码
    const username = registerForm.querySelector("input[name=username]").value.trim()
    const password = registerForm.querySelector("input[name=password]").value.trim()

    // 判断是否为空
    if (!username || !password) {
        alert("您的输入不合理，请重新输入")
        return
    }

    // 发送请求
    const result = await axios({
        url:"/api/register",
        method:"post",
        data:{
            username,
            password
        }
    })

    // 输出响应结果
    // console.log(result);
    // 判断是否注册成功
    if(result.data.code === 0) {
        toastr.success(result.data.message,"恭喜")
        setTimeout(() => {
            // 切换显示登陆表单
            registerA.click()
            // 帮用户把账号(用户名)填写到登陆表单 
            loginDiv.querySelector("input[name=username]").value = username
        }, 2000);
    }
})

/* 登录 */
// 给form表单添加submit事件
loginForm.addEventListener("submit", async function (eve) {
    // 阻止默认事件
    eve.preventDefault()
    // 获取form表单内用户名和密码
    const username = loginForm.querySelector("input[name=username]").value.trim()
    const password = loginForm.querySelector("input[name=password]").value.trim()

    
    // 发送请求
    const result = await axios({
        url:"/api/login",
        method:"post",
        data:{
            username,
            password,
        },
    })
    
    if(result.data.code === 0) {
        // 把token存到本地存储中
        localStorage.setItem("token87",result.data.token)
        toastr.success(result.data.message,"你好")
        setTimeout(() => {
            location.href = "./index.html"
        }, 2000);
    }
})